<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>文章详情</title>
    <meta charset="utf-8"/>
<%--    <script src="js/jquery-3.3.1.js"></script>--%>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
        }

        .article {
            max-width: 850px;
            width: 90%;
            padding: 40px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .article-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .article-title {
            font-size: 30px;
            font-weight: bold;
            color: #333;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        }

        .article-author {
            font-size: 14px;
            color: #888;
            margin-top: 5px;
        }

        .article-content {
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .article-footer {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 20px;
            border-top: 1px solid #ccc;
            padding-top: 10px;
        }

        .like-button {
            padding: 8px 16px;
            background-color: #ff5e3a;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        .like-button.clicked {
            background-color: #ff3b17;
            cursor: not-allowed;
        }

        .like-count {
            margin-left: 10px;
            font-size: 18px;
            color: #666;
            font-weight: bold;
        }

        .like-count:before {
            content: "👍";
            margin-right: 5px;
        }

        .comments-container {
            margin-top: 30px;
        }

        .comment-header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .comment {
            margin-bottom: 15px;
        }

        .comment-author {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }

        .comment-message {
            font-size: 16px;
            line-height: 1.4;
            color: #555;
        }

        .comment-date {
            font-size: 12px;
            color: #888;
        }

        .like-failure-message {
            margin-top: 10px;
            font-size: 14px;
            color: red;
        }
    </style>

<%--    <script>--%>
<%--        document.addEventListener("DOMContentLoaded", function () {--%>
<%--            var likeButton = document.querySelector(".like-button");--%>
<%--            var likeCount = 0;--%>
<%--            var isLiked = false;--%>
<%--            var likeFailureMessage = document.querySelector(".like-failure-message");--%>

<%--            likeButton.addEventListener("click", function () {--%>
<%--                if (isLiked) {--%>
<%--                    likeButton.classList.remove("clicked");--%>
<%--                    likeButton.textContent = "点赞";--%>
<%--                    likeCount--;--%>
<%--                    likeFailureMessage.textContent = ""; // 清空错误提示信息--%>
<%--                } else {--%>
<%--                    if (likeButton.classList.contains("clicked")) {--%>
<%--                        // User already liked the article--%>
<%--                        likeFailureMessage.textContent = "您已经点过赞了，无法再次点赞。";--%>
<%--                        return;--%>
<%--                    }--%>

<%--                    likeButton.classList.add("clicked");--%>
<%--                    likeButton.textContent = "已赞";--%>
<%--                    likeCount++;--%>
<%--                    likeFailureMessage.textContent = ""; // 清空错误提示信息--%>
<%--                }--%>

<%--                updateLikeCount();--%>
<%--                isLiked = !isLiked;--%>
<%--            });--%>

<%--            function updateLikeCount() {--%>
<%--                var countElement = document.querySelector(".like-count");--%>
<%--                countElement.textContent = likeCount;--%>
<%--            }--%>
<%--        });--%>
<%--    </script>--%>
</head>
<body>
<div class="container">
    <div class="article">
        <div class="article-header">
            <h1 class="article-title">标题:${article.title}</h1>
            <p class="article-author">作者:${otherUser.username}</p>
        </div>
        <div class="article-content">
            <p>${article.text}</p>
        </div>
        <div class="article-footer">
            <a class="like-button" href="${pageContext.request.contextPath}/user/giveLike?&rid=${article.rid}">${message}</a>
            <a class="like-button" href="${pageContext.request.contextPath}/index.html">返回首页</a>
            <span class="like-count">${article.favour}</span>
            <div class="like-failure-message"></div> <!-- 错误提示信息 -->
        </div>
        <div class="comments-container">
            <h2 class="comment-header">评论</h2>

            <div class="comment">
                <div class="comment-author">评论人1</div>
                <div class="comment-message">这是一条评论。</div>
                <div class="comment-date">2023年7月10日</div>
            </div>

            <div class="comment">
                <div class="comment-author">评论人2</div>
                <div class="comment-message">这是另一条评论。</div>
                <div class="comment-date">2023年7月11日</div>
            </div>
        </div>
    </div>

</div>
</body>
</html>

